<template>
    <el-form :inline="true" :model="formData" label-width="50">
      <el-form-item label="媒体:" prop="mediaId">
        <el-select @change="e => handleOptionChange(e, 'mediaId')" v-model="formData.mediaId" style="width: 150px" placeholder="请选择媒体" clearable>
          <el-option v-for="item in formList.mediaList" :key="item.id" :value="item.id" :label="item.mediaName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="书城:" prop="platformId">
        <el-select @change="e => handleOptionChange(e, 'platformId')" v-model="formData.platformId" style="width: 150px" placeholder="请选择书城" clearable>
          <el-option v-for="item in formList.platformList" :key="item.id" :value="item.id" :label="item.platformName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投手:" prop="selectUserList">
        <el-select multiple collapse-tags @change="e => handleOptionChange(e, 'selectUserList')" v-model="formData.selectUserList" style="width: 150px" placeholder="请选择投手" clearable>
          <el-option v-for="item in formList.pitcherList" :key="item.id" :value="item.username" :label="item.username"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, onMounted, nextTick } from "vue";
import { MediaList, PlatformList } from '@/apis/media'
import { GetPitcher } from '@/apis/user'
const formList = reactive({
  mediaList: [],
  platformList: [],
  pitcherList: []
})
const formData = reactive({
  mediaId: '',
  platformId: '',
  selectUserList: []
});

onMounted(() => {
  Promise.all([getMediaList(), getPlatformList()]).then(() => {
    handleOptionChange()
  })
  GetPitcher().then(res => {
    formList.pitcherList = res
  })
})
const emits = defineEmits(['change'])
const handleOptionChange = (value, type) => {
  nextTick(() => emits('change', formData))
}
const getMediaList = () => {
  return MediaList().then(res => {
    formList.mediaList = res
    if (res && res.length) {
        formData.mediaId = res[0].id
    }
  })
}
const getPlatformList = () => {
  return PlatformList().then(res => {
    formList.platformList = res
    if (res && res.length) {
        formData.platformId = res[0].id
    }
  })
}
</script>